<template>
	<view class="shopping">
		<view style="width: 100%;margin-bottom:150upx;">
			<view class="shopping-content">
				<view class="cart-list" v-for="(item,index) in shopping" :key='index'>
					<view class="image-wrapper">
						<image :src="item.spuImg"></image>
						<view @click="radioChange(item,index)">
							<image class="radios" :src="'../../static/'+[item.checked?'selected':'select']+'.png'"></image>
						</view>
					</view>
					<view class="item-right">
						<view class="item-rightName">{{item.title}}</view>
						<view style="color: #909399;">{{item.skuTitle}}</view>
						<view><text style="text-decoration: line-through;">¥{{item.originalPrice/100}}</text><text>¥{{item.price/100}}</text></view>
						<view class="count"><text @click="subtract(index,item.id)">-</text>
							<text>{{item.num}}</text>
							<text @click="addsubtract(index,item.id)">+</text></view>
					</view>
					<view class="del-bt">
						<image @click="deletes(item.id)" src="../../static/images/close-icon.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="action-section">
			<view class="action-contont">
				<view class="checkbox">
					<label class="radio" @click="currents()">
						<image :src="'../../static/'+[allChecked?'selected':'select']+'.png'" style="width: 50upx;height: 50upx;"></image>
					</label>
					<view class="checkbox-content" v-if="!empty">
						<text @click="emptys()">清空</text>
					</view>
				</view>
				<view class="total-box">
					<view>¥{{totalPrice}}</view>
					<view style="font-size: 25upx;color: #8C939D;">总共{{totalNum}}件</view>
				</view>
				<view class="no-border" @click="border()">
					<view>去结算</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allChecked: true, //是否全选
				empty: false, //清空
				appData: [],
				Token: "",
				shopping: [], //初始化数组
				merchandise:[],
			    shoppings:[],
				info:[]
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中.....'
			})
			this.Token = uni.getStorageSync('Token')
		},
		mounted() {
			this.initialize()
			// this.remind()
		},
		methods: {
			// remind(){
			// 	if (this.Token == "") {} else {
			// 		uni.showModal({
			// 			title: '登录提示',
			// 			content: '您尚未登录，是否立即登录？',
			// 			success: function(res) {
			// 				if (res.confirm) {
			// 					uni.navigateTo({
			// 						url: '../rapidLogin/index'
			// 					})
			// 				} else if (res.cancel) {
			// 				}
			// 			}
			// 		});
			// 	}
			// },
			emptys() {
				var addid = ''
				for (let i in this.shopping) {
					addid = this.shopping[i].id
				}
				console.log(addid)
				uni.request({
					url: this.$C.webUrl + 'm.api?_gp=cart&_mt=removeCartItemBatch&cartIdList=' + addid,
					header: {
						'accessToken': this.Token
					},
					success: (res) => {
						uni.showToast({
						    title: '清空成功',
						    duration: 2000
						});
					}
				})
				if (this.allChecked == false) {
					this.allChecked = true
				}
			},
			// 全选
			currents() {
				if (!this.allChecked) {
					for (let i in this.shopping) {
						this.shopping[i].checked = true
					}
				} else {
					for (let i in this.shopping) {
						this.shopping[i].checked = false
					}
				}
				this.empty = !this.empty
				this.allChecked = !this.allChecked
			},
			//当选
			radioChange(e, x) {
				e.checked = !e.checked
				if (!e.checked) {
					this.allChecked = false
					this.empty = !this.empty
				} else {
					// 判断每一个商品是否是被选择的状态
					const cartList = this.shopping.every(item => {
						return item.checked === true
					})
					if (cartList) {
						this.allChecked = true
						this.empty = !this.empty
					} else {
						this.allChecked = false
					}
				}
				const cartList = this.shopping.every(item => {
					return item.checked === true
				})
			},
			//数量++
			addsubtract(index, id) {
				var shopping = this.shopping
				var num = shopping[index].num;
				uni.request({
					url: this.$C.webUrl + `m.api?_gp=cart&_mt=updateCartItemNum&cartId=${id}&num=${num}`,
					header: {
						'accessToken': this.Token
					},
					success: (res) => {
						console.log(res)
						if (num >0) {
							num = num + 1;
							shopping[index].num = num;
						}
					}
				})
			},
			//数量--
			subtract(index, id) {
				var shopping = this.shopping
				var num = shopping[index].num;
				uni.request({
					url: this.$C.webUrl + `m.api?_gp=cart&_mt=updateCartItemNum&cartId=${id}&num=${num}`,
					header: {
						'accessToken': this.Token
					},
					success: (res) => {
						if (num > 1) {
							num = num - 1;
							shopping[index].num = num;
							//商品数量<1时,商品数量不可减
						} else {
							alert('再减就没有商品啦')
						}
					}
				})
			},
			border(){
				this.info = this.shopping.filter(item=>{
					return item.checked==true
				})
				console.log(this.info)
				let merchandise=JSON.stringify(
					 this.info
				)
				console.log(merchandise)
				uni.navigateTo({
					url:'../order/index?id='+merchandise
				})
			},
			initialize() {
				uni.request({
					url: this.$C.webUrl + 'm.api?_gp=cart&_mt=getCartList',
					header: {
						'accessToken': this.Token
					},
					success: (res) => {
						console.log(res)
						uni.hideLoading()
						let shopping = res.data.data
						for (let i in shopping) {
							shopping[i] = {
								...shopping[i],
								checked: true //添加checked:true作为选中的值
							}
						}
						this.shopping = shopping
						for (let i in this.shopping) {
							 this.shoppings=this.shopping[i]
						}
						console.log(shopping)
					
						this.merchandise = {
							id: this.shoppings.id, //id
							skuId: this.shoppings.skuId, //id
							title : this.shoppings.title ,
							num : this.shoppings.num,
							originalPrice:this.shoppings.originalPrice, //id
							vipPrice:this.shoppings.vipPrice,
							price:this.shoppings.price,
							skuTitle:this.shoppings.skuTitle ,//帮安装
							spuImg :this.shoppings.spuImg,  //img
							stock:this.shoppings.stock,
							spuId:this.shoppings.spuId,
							checked:this.shoppings.checked,
							categoryId :this.shoppings.categoryId,  //
							categoryIdList :this.shoppings.categoryIdList,  //
							gmtCreate: this.shoppings.gmtCreate,
							gmtUpdate: this.shoppings.gmtUpdate,
						}
					}
				})
			},
			//删除
			deletes(e) {
				console.log(e)
				uni.request({
					url: this.$C.webUrl + 'm.api?_gp=cart&_mt=removeCartItem&cartId=' + e,
					header: {
						'accessToken': this.Token
					},
					success: (res) => {
						this.initialize()
						console.log(res)
					}
				})
			}
		},
		//计算价格
		computed: {
			// 总价
			totalPrice() {
				let totalPrice = 0
				this.shopping.map(item => { //数量*价格
					item.checked ? totalPrice += item.num * item.price / 100 : totalPrice += 0
				})
				return totalPrice.toFixed(0)
			},
			// 总数
			totalNum() {
				let totalP = 0
				this.shopping.map(item => {
					return item.checked ? totalP += item.num : totalP += 0
				})
				return totalP.toFixed(0)
			}
		},
	}
</script>

<style>
	.shopping {
		width: 100%;
	}

	.no-border view {
		text-align: center;
		line-height: 70upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.no-border {
		width: 25%;
		height: 70upx;
		background: #fa436a;
		box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72);
		border-radius: 30upx;
		margin: 15upx 0px;
	}

	.total-box {
		padding: 15upx 0px;
		margin-left: 80upx;
		font-size: 30upx;
	}

	.shopping-content {
		width: 90%;
		height: auto;
		margin: auto;
	}

	.checkbox-content .radio {
		position: absolute;
		top: 10upx;
	}

	.checkbox-content text {
		float: right;
		padding-top: 8upx;
		color: #FFFFFF;
		padding-right: 20upx;
		font-size: 30upx;
	}

	.checkbox-content {
		position: relative;
		width: 100%;
		height: 55upx;
		border-radius: 30upx;
		margin: 20upx 0px;
		background-color: #C0C4CC;
	}

	.checkbox {
		width: 22%;
		line-height: 100%;
		display: flex;
		border-radius: 30upx;
	}

	.checkbox uni-image {
		position: absolute;
		top: 22upx;
		left: 68upx;
		z-index: 9999;
	}

	.action-contont {
		width: 90%;
		margin: auto;
		display: flex;
		justify-content: space-around;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
		border-radius: 8px;
	}

	.action-section {
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 130upx;
	}

	.item-rightName {
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*让文本强制在一行不换行*/
		text-overflow: ellipsis;
	}

	.count {
		width: 200upx;
		display: flex;
		justify-content: space-around;
		background-color: #ECECEC;
	}

	.count text {
		width: 15%;
	}

	.cart-list {
		width: 100%;
		margin: 80upx 0upx;
		display: flex;
		justify-content: space-between;
	}

	.item-right {
		width: 50%;
		line-height: 60upx;
		font-size: 30upx;
		margin-left: 20upx;
	}

	.image-wrapper {
		width: 30%;
		position: relative;
	}

	.image-wrapper .radios {
		position: absolute;
		top: -14upx;
		left: -24upx;
		width: 50upx;
		height: 50upx;
	}

	.image-wrapper image {
		width: 230upx;
		height: 230upx;
	}

	.del-bt image {
		width: 30upx;
		height: 30upx;
	}
</style>
